39. Vue组件切换 | 您所在的位置:网站首页 › vue table切换 › 39. Vue组件切换 |
需求 上一篇章使用v-if和v-else结合一个flag属性值来控制组件之间的切换。本章节使用components元素来更加直接的切换组件。 使用示例如下: 只需要绑定方法修改comName的值对应不同注册的组件名,就可以达到切换组件的效果。 示例1.创建登陆、注册两个组件,并初始化定义组件名变量comName![]() image-20200207172444559 2.使用component设置指定:is组件名称,显示组件![]() image-20200207172901153 打开浏览器显示如下: ![]() image-20200207173653727 3.修改comName,改为注册组件![]() image-20200207173735819 浏览器展示如下: ![]() image-20200207174102172 也就是只要写一个方法来控制comName这个值,那么就可以切换组件了。 4.编写两个按钮,切换comName的值![]() image-20200207174607122 浏览器测试分别点击按钮,如下: ![]() image-20200207174749818 ![]() image-20200207174804489 可以看到切换组件的效果已经出来了。 完整示例代码 Title 登陆 注册 // 创建登陆组件 Vue.component('login',{ template:'登陆组件' }) // 创建注册组件 Vue.component('register',{ template:'注册组件' }) // 创建第一个Vue的实例 var vm1 = new Vue({ el: '#app1', data: { comName: '', // 设置默认的组件显示登陆 }, })更多精彩原创Devops文章,快来关注我的Devops社群吧: ![]() |
CopyRight 2018-2019 实验室设备网 版权所有 |